<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>填写与核对订单</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" href="css/order.ordersubmit.css">
    <script type="application/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="application/javascript" src="js/bootstrap.min.js"></script>
    <script type="application/javascript" src="layui/layui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<div id="add-user-layer" style="display: none; padding: 20px">
    <form id="add-user-form" class="layui-form layui-form-pane">
        <input type="hidden" value=""name="cus_id" id="cus_id">
        <input type="hidden" value="0"name="status" id="status">
        <div class="layui-form-item">
            <label class="layui-form-label">车辆名称</label>
            <div class="layui-input-block">
                <input type="text" name="cname"id="cname" class="layui-input" readonly="readonly" lay-verify="required" autocomplete="off">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">租期</label>
            <div class="layui-input-block">
                <input type="text" name="order_day"id="order_day" class="layui-input" readonly="readonly" lay-verify="required" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">租车地址</label>
            <div class="layui-input-block">
                <input type="text" name="getCarAddr"id="getCarAddr" class="layui-input" lay-verify="required" readonly="readonly">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">还车地址</label>
            <div class="layui-input-block">
                <input type="text" name="backCarAddr" id="backCarAddr" class="layui-input"  readonly="readonly">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">总价</label>
            <div class="layui-input-block">
                <input type="text" name="o_price" id="o_price" class="layui-input" lay-verify="required" autocomplete="off" readonly="readonly">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="buttons center" lay-submit lay-filter="add-user-form-submit">确认提交</button>
            </div>
        </div>
    </form>
</div>
<body style="position: static">
    <div id="app" class="bgGray">
        <div data-v-95ac8d30="" class="header3">
            <div data-v-95ac8d30="" class="layout clear">
                <div data-v-95ac8d30="" class="left logo">
                    <a data-v-95ac8d30="" href="index.html">
                        <img data-v-95ac8d30="" src="">
                    </a>
                </div>
                <div data-v-95ac8d30="" class="header3Nav right">|<a data-v-95ac8d30="" href="mymain.html">我的订单</a>|<a data-v-95ac8d30="" href="helpCenter.html">帮助中心</a>|<a data-v-95ac8d30="" href="javascript:">退出</a></div> <div data-v-95ac8d30="" class="header3User right"><i data-v-95ac8d30="" class="iconfont icon-phone"></i><span data-v-95ac8d30="" class="sp1">400-919-8000</span><span data-v-95ac8d30="" class="sp2" id="welcome"></span><span data-v-95ac8d30="" class="sp3"></span></div></div></div>




        <div class="checkOrderTit">
            <div class="layout">
                <div class="checkOrderTitCom">
                    <div class="checkOrderTitComT">
                        <div class="td1 bgRed"></div>
                        <div class="td2 bgRed">1</div>
                        <div class="td3 bgRed"></div>
                        <div class="td2 bgRed">2</div>
                        <div class="td3 bgGray1"></div>
                        <div class="td2 bgGray1">3</div>
                        <div class="td1 bgGray1"></div>
                    </div>
                    <div class="checkOrderTitComB">
                        <div class="bd1 colorRed">选择车辆</div>
                        <div class="bd2 colorRed">填写和核对订单</div>
                        <div class="bd1 colorGray">提交成功</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="orderMsg clear">

            <div class="orderMsgs" >
            <div class="orderMsgL left">
                <img :src="infos.car_picture"><br/>
                <p>{{infos.car_type}}|{{infos.car_sitname}}座</p>

            </div>
            <div class="orderMsgR left">
                <div class="carTitle">
                    <span class="carTitle1 left" id="car_name">{{infos.car_name}}</span>
                </div>

                <div class="selCarMsg">
                    <div class="selCarMsgCom">
                        <div class="MsgTit">取车</div>
                        <div class="Msg">取车地址：<span id="getaddress"></span></div>
                    </div>

                    <div class="selCarMsgCom">
                        <div class="MsgTit">还车</div>
                        <div class="Msg">还车地址：<span id="returnaddress"></span></div>
                    </div>
                </div>
            </div>
                <div class="costCom right">
                    <h3>费用明细</h3>
                    <div class="item">
                        <span class="left" >基本租金</span>
                        <span class="right">{{infos.c_price}}元</span>
                    </div>
                    <div class="item">
                        <span class="left" >手续费（35元/单）</span>
                        <span class="right">35元</span>
                    </div>
                    <div class="item">
                        <span class="left" >基本保障服务</span>
                        <span class="right">50元</span>
                    </div>
                    <div class="item">
                        <span class="left" >租车天数</span>
                        <span class="right" ><input type="text" id="days" onblur="{{gitMoney()}}"></span>
                    </div>
                    <div class="payMony">
                    <label class="right">基本金额&nbsp;
                    <span id="total">{{gitMoney()}}</span></label>
                    </div>

                    <button class="buttons right" id="add-user-btn" >
                        提交
                    </button>
                    <span><font color="red">ps:租车时限按照每天00：00分为期限，超过该天数将按照全天进行收费</font></span>
                </div>
        </div>

        </div>
    </div>
<script>
    function getid(data) {
        var url=window.location.toString();
        var Objs = url.split("?");
        if(Objs.length>1){
            var arr = Objs[1].split("&");
            var newarr;
            for (var i = 0; i < arr.length; i++) {
                newarr = arr[i].split("=");
                if (newarr != null && newarr[0] == data) {
                    return newarr[1];
                }
            }
        }

    }


    $(document).ready(function () {
        $("#getaddress").text(sessionStorage.getItem('getaddress'));
        $("#returnaddress").text(sessionStorage.getItem('returnaddress'));

    })

    new Vue({
        el:'#app',
        data: {
            infos:[]

        },
        created:function () {
            var info=this;
            $.ajax({
                url:'getCarByCid/'+getid('id'),
                type:"GET",
                contentType:"application/json",
                dataType:"json"
            }).then(function (res) {

                 info.infos=res;


            })

        },
        methods:{
            gitMoney: function (){
                var days=document.getElementById("days").value;
                console.log(days);
                var total = 0;

                total = this.infos.c_price;
                return total;
            }
        }


    })
    var id=window.localStorage.getItem("id");

    $(function (){
        $.ajax({
            url: "getCusByid/"+id ,
            dataType:"json",
            type: 'post',
            contentType: 'application/json',
            success:function (res){
                //console.log(res);
                if(res!=null){
                    $("#welcome").text("你好 "+ res.cus_name);


                }
            }
        })
    })
    function  submitorder() {

    location.href='mymain.html';



    }




</script>
<script>
    var id=window.localStorage.getItem("id");

    layui.use('form',function(){
        var form=layui.form;
        $('#add-user-btn').click(function() {
            // 每次显示前重置表单
            $('#add-user-form')[0].reset();
            layer.open({
                type: 1,
                title: '确认订单',
                skin: 'layui-layer-molv',
                area: ['500px'],
                content: $('#add-user-layer')
            });
            $("#cus_id").val(id);//获取用户id
            $("#cname").val(document.getElementById("car_name").innerText)
            $("#order_day").val(document.getElementById("days").value);//获取租期天数
            $("#getCarAddr").val(document.getElementById("getaddress").innerText);//获取租车取车地址
            $("#backCarAddr  ").val(document.getElementById("returnaddress").innerText);//获取租车归还车地址
            $("#status").val();//获得订单支付状态，默认为0 为未支付，1为支付
            //console.log(document.getElementById("total").innerText);
            $("#o_price").val(document.getElementById("total").innerText * document.getElementById("days").value +85);

        });
        form.on('submit(add-user-form-submit)', function(data) {
            // ajax方式添加用户
            $.ajax({
                url: "/saveOrders",
                type: "POST",
                data: JSON.stringify(data.field),
                contentType: 'application/json',
                dataType: 'json',
                success: function (flag) {
                    console.log(flag);
                        if (flag) {
                            alert("成功");
                            location.href='mymain.html';
                        } else {
                            alert("失败");
                            //layer.msg('添加失败');
                        }
                    },
                    error: function() {
                        console.log("ajax error");
                    }
                })
                // 阻止表单跳转
                //return false;
            });
            // $(window).on("resize", function () {
            //     layer.full(index);
            // });


    });


</script>


</body>
</html>